import React, { Component } from 'react'

class Navbar extends Component{
  render(){
    return <div style={{background:"red"}}>
      <button onClick={()=>{
        console.log("子通知父，让父的isShow取反。", this.props.event);
        this.props.event();   // 调用父组件传来的回调函数
        
      }}>click</button>
      <span>navbar</span>
    </div>
  }
}

class Sidebar extends Component{
  render(){
    return <div style={{background:"yellow", width:"200px"}}>
      <ul>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
      </ul>
    </div>
  }
}

export default class App extends Component {

  state = {
    isShow: true
  }

  render() {
    return (
      <div>
        <Navbar event={() => {
          this.setState({
            isShow: !this.state.isShow
          })
        }}/>
        {this.state.isShow && <Sidebar/>}
      </div>
    )
  }
}
